﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两款jQuery仿flash导航菜单</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript">
        $(document).ready(function() {

            /* 	1st example	*/

            /// wrap inner content of each anchor with first layer and append background layer
            $("#menu1 li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

            // loop each anchor and add copy of text content
            $("#menu1 li a").each(function() {
                $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
            });

            $("#menu1 li a").hover(function() {
                // this function is fired when the mouse is moved over
                $(".out",	this).stop().animate({'top':	'40px'},	250); // move down - hide
                $(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show
                $(".bg",	this).stop().animate({'top':	'0px'},		120); // move down - show

            }, function() {
                // this function is fired when the mouse is moved off
                $(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
                $(".over",	this).stop().animate({'top':	'-40px'},	250); // move up - hide
                $(".bg",	this).stop().animate({'top':	'-40px'},	120); // move up - hide
            });


            /*	2nd example	*/

            $("#menu2 li a").wrapInner( '<span class="out"></span>' );

            $("#menu2 li a").each(function() {
                $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
            });

            $("#menu2 li a").hover(function() {
                $(".out",	this).stop().animate({'top':	'40px'},	300); // move down - hide
                $(".over",	this).stop().animate({'top':	'0px'},		300); // move down - show

            }, function() {
                $(".out",	this).stop().animate({'top':	'0px'},		300); // move up - show
                $(".over",	this).stop().animate({'top':	'-40px'},	300); // move up - hide
            });

        });
    </script>
</head>
<body>
<br/>
<div id="menu1" class="menu">
    <ul>
        <li><a href="#">首  页</a></li>
        <li><a href="#">企业文化</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">新闻中心</a></li>
        <li><a href="#">阳光服务</a></li>
        <li><a href="#">加盟代理</a></li>
        <li><a href="#">在线咨询</a></li>
    </ul>
    <div class="cls"></div>
</div>

<div id="menu2" class="menu">
    <ul>
        <li><a href="#">首　　页</a></li>
        <li><a href="#">企业文化</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">新闻中心</a></li>
        <li><a href="#">阳光服务</a></li>
        <li><a href="#">加盟代理</a></li>
        <li><a href="#">在线咨询</a></li>
    </ul>
    <div class="cls"></div>
</div>

<!-- 代码 结束 -->
<div style="text-align:center">
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>